import { WidgetType, WidgetOption } from '@/types'
import input from '../input'
import WidgetSelect from './WidgetSelect.vue'
import SelectSetting from './SelectSetting.vue'
import SelectFill from './SelectFill.vue'

/** 下拉选择 */
export default {
  ...input,
  key: 'select',
  name: '下拉选择',
  type: WidgetType.SELECT,
  icon: 'fa-icon-widget-select',
  componentExtend: WidgetSelect,
  settingComponent: SelectSetting,
  fillingComponent: SelectFill,

  /** 初始控件数据 */
  init(widget, data) {
    const options = widget.selectOptions

    input.init?.(widget, data)

    // 初始选项列表
    if (widget.isSet && !options.length) {
      options.push('选项1', '选项2')
    }
  },

  settingValidate(widget) {
    if (widget.selectOptions.some(option => !option)) {
      return '请设置选项值'
    }
  },

  usingValidate(widget) {
    if (widget.required && !widget.hasFillValue) return `请选择${widget.displayName}`
  },

  rawWidgetCreator(widgetData, data) {
    const { selectOptions: options } = data

    input.rawWidgetCreator?.(widgetData, data)

    return Object.assign(widgetData, {
      selectOptions: [...(options || [])]
    })
  },

  rawFieldGetter(widget, data) {
    const { selectOptions: options } = widget

    input?.rawFieldGetter?.(widget, data)

    return Object.assign(data, {
      selectOptions: [...(options || [])]
    })
  }
} as WidgetOption
